<script setup lang="ts">

import {onMounted, ref} from "vue";

const show = ref(false);
const {locale, setLocale, tm} = useI18n()


onMounted(()=>{
})
const toHome = () => {
  console.log("点击home====")
}
const toVideos = () => {

}

</script>
<!--导航栏-->
<template>
  <div class="">
    <NuxtLink to="/">
      <div class="app-bar-div">
        <v-btn flat elevation="0" height="45" rounded="0" class="app-bar-btn">{{
            $t('shop.appBar.shop')
          }}
        </v-btn>
      </div>
    </NuxtLink>

    <NuxtLink to="/videos">
      <div class="app-bar-div">
        <v-btn flat height="45" rounded="0" class="app-bar-btn">{{
            $t('shop.appBar.videos')
          }}
        </v-btn>
      </div>
    </NuxtLink>
    <NuxtLink to="/">
      <div class="app-bar-div">
        <v-btn flat height="45" rounded="0" class="app-bar-btn">{{
            $t('shop.appBar.ourStory')
          }}
        </v-btn>
      </div>
    </NuxtLink>
    <NuxtLink to="/">
      <div class="app-bar-div">
        <v-btn flat height="45" rounded="0" class="app-bar-btn">{{
            $t('shop.appBar.faq')
          }}
        </v-btn>
      </div>
    </NuxtLink>
    <NuxtLink to="/">
      <div class="app-bar-div">
        <v-btn flat height="45" rounded="0" class="app-bar-btn">{{
            $t('shop.appBar.contactUs')
          }}
        </v-btn>
      </div>
    </NuxtLink>
  </div>

  <!--    <div class="radio-input ">-->
  <!--      <label @click="toHome">-->
  <!--        <input type="radio" id="value-1" name="value-radio" value="value-1">-->
  <!--        <span>{{ $t('shop.appBar.shop') }}</span>-->
  <!--      </label>-->
  <!--      <label @click="toVideos">-->
  <!--          <input type="radio" id="value-2" name="value-radio" value="value-2">-->
  <!--          <span>{{ $t('shop.appBar.videos') }}</span>-->
  <!--      </label>-->
  <!--      <label>-->
  <!--        <input type="radio" id="value-3" name="value-radio" value="value-3">-->
  <!--        <span>{{ $t('shop.appBar.ourStory') }}</span>-->
  <!--      </label>-->
  <!--      <label>-->
  <!--        <input type="radio" id="value-3" name="value-radio" value="value-4">-->
  <!--        <span>{{ $t('shop.appBar.faq') }}</span>-->
  <!--      </label>-->
  <!--      <label>-->
  <!--        <input type="radio" id="value-3" name="value-radio" value="value-5">-->
  <!--        <span>{{ $t('shop.appBar.contactUs') }}</span>-->
  <!--      </label>-->
  <!--      <span class="selection"></span>-->
  <!--    </div>-->

</template>

<style scoped>

.app-bar-div{
  @apply border-b-4 border-b-transparent hover:border-b-[#786554] ;
}
.app-bar-btn{
  @apply text-base font-serif
}

.radio-input input {
  display: none;
}

.radio-input {
  --container_width: 600px;
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 0px;
  background-color: #F5F4F2;
  color: #383838;
  width: var(--container_width);
  overflow: hidden;
  border: 0px solid rgba(53, 52, 52, 0.226);
}

.radio-input label {
  width: 100%;
  padding: 20px 10px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  font-weight: 600;
  letter-spacing: -1px;
  font-size: 14px;
}

.selection {
  display: none;
  position: absolute;
  height: 100%;
  width: calc(var(--container_width) / 5);
  z-index: 0;
  left: 0;
  top: 0;
  transition: .15s ease;
}

.radio-input label:has(input:checked) {
  color: #fff;
}

.radio-input label:has(input:checked) ~ .selection {
  background-color: #786554;
  display: inline-block;
}

.radio-input label:nth-child(1):has(input:checked) ~ .selection {
  transform: translateX(calc(var(--container_width) * 0 / 5));
}

.radio-input label:nth-child(2):has(input:checked) ~ .selection {
  transform: translateX(calc(var(--container_width) * 1 / 5));
}

.radio-input label:nth-child(3):has(input:checked) ~ .selection {
  transform: translateX(calc(var(--container_width) * 2 / 5));
}

.radio-input label:nth-child(4):has(input:checked) ~ .selection {
  transform: translateX(calc(var(--container_width) * 3 / 5));
}

.radio-input label:nth-child(5):has(input:checked) ~ .selection {
  transform: translateX(calc(var(--container_width) * 4 / 5));
}
</style>